<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>My JSP 'testXml.jsp' starting page</title>
    <style type="text/css">
    	*{
    		margin:0px;
    		padding:0px;
    	}
    	#test dl.category dd{
    		display: none;
    		text-align: center;
    		width:200px;
    		height:25px;
    		line-height: 25px;
    	}
    	a{
    		text-decoration: none;
    	}
    	#test dl.category dt{
    		width:200px;
    		border:1px solid red;
    		height:30px;
    		line-height:30px;
    		text-align: center;
    	}
    </style>
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  	<script type="text/javascript">
			$("document").ready(function(){
		  		$.post("xml/rongtongBlog-menu.xml", function(data){
					        $(data).find('myBlog').find('menu').find('menuCategory').each(function(index, ele){
					        	var menuCategory = $(ele).attr("categoryName");
					            //加入标题列
					            $("#test").append('<dl id=category'+index+' class="category"><dt class="title"><a href="#" onclick="menuClick('+index+')">'+menuCategory+'</a></dt><dl>');
					            var menuUrl = $(ele).find('menuNode').each(function(index2,ele2){
					            	var title = $(ele2).attr("menuName");
					            	var url = $(ele2).text();
					            	$("#category"+index).append('<dd><a href="'+url+'">'+title+'</a></dd>');
					            });
					        })
					    });
			});
			function menuClick(num){
				$("#category"+num+" dd").toggle(1000);
				
			}
  	</script>
  </head>
  
  <body>
  		<div id="test"></div>
  </body>
</html>
